<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: csnf
  Date: 2024/12/23
  Time: 15:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生列表</title>
    <style>
        /* 全局基础样式 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6; /* 行高，让文本排版更舒适 */
            margin: 0;
            padding: 0;
            background-color: #f8f9fa; /* 柔和的页面背景色 */
            color: #333; /* 文本主要颜色 */
        }

        /* 表单样式 */
        form {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 更柔和的阴影效果 */
            width: 400px;
            margin: 40px auto; /* 增加上下外边距，让表单位置更合适 */
            display: flex; /* 使用弹性布局，方便内部元素排列 */
            flex-direction: column; /* 垂直排列内部元素 */
            align-items: center; /* 水平居中内部元素 */
        }

        form input[type="text"] {
            width: 80%; /* 适当缩小宽度，避免太宽 */
            padding: 12px 15px;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0; /* 淡灰色边框 */
            border-radius: 4px;
            font-size: 16px; /* 适当增大字号 */
            transition: border-color 0.3s ease; /* 过渡效果，让边框颜色变化更平滑 */
        }

        form input[type="text"]:focus {
            border-color: #007bff; /* 获得焦点时边框变色 */
            outline: none; /* 去除默认的聚焦外框 */
        }

        form input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease; /* 过渡效果，让背景色变化更平滑 */
        }

        form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* 表格样式 */
        table {
            width: 90%; /* 适当增加表格宽度 */
            margin: 40px auto;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden; /* 隐藏超出部分，防止样式错乱 */
        }

        table tr td {
            border: 1px solid #e0e0e0;
            padding: 15px;
            text-align: center;
            font-size: 16px;
        }

        table tr:nth-child(even) {
            background-color: #f4f6f9; /* 更柔和的偶数行背景色 */
        }

        table tr:hover {
            background-color: #f0f2f5; /* 鼠标悬停行的背景色变化 */
            transition: background-color 0.3s ease; /* 过渡效果 */
        }

        /* 链接样式 */
        a {
            text-decoration: none;
            color: #007bff;
            margin: 0 8px;
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 16px;
            transition: background-color 0.3s ease, color 0.3s ease; /* 背景色和文字颜色过渡效果 */
        }

        a:hover {
            background-color: #007bff;
            color: white;
        }

        /* 按钮样式 */
        button {
            background-color: #dc3545; /* 红色系，用于删除按钮等危险操作提示 */
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
<form action="StudentServlet">
    <input type="text" name="sName" placeholder="请输入学生姓名">
    <input type="submit" value="查询">
</form>

<table border="1">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>班级</td>
        <td>操作</td>
    </tr>
    <c:forEach items="${stuList}" var="stu">
        <tr>
            <td>${stu.sId}</td>
            <td>${stu.sName}</td>
            <td>${stu.birth}</td>
            <td>${stu.gender}</td>
            <td>${stu.cla.cName}</td>
            <td>
                <button onclick="del(${stu.sId})">删除</button>
                <a href="getStudentById?sId=${stu.sId}">修改</a>
            </td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="6">
            <a href="getAllCla">添加学生</a>
        </td>
    </tr>
</table>
<script>
    function del(id) {
        if (confirm("确定删除吗？")){
            location.href = "deleteById?id="+id;
        }
    }
</script>
</body>
</html>